iT邦幫忙

2024 iThome 鐵人賽

DAY 2
0
Mobile Development

從零開始學React Native系列 第 2

【從零開始學React Native】1. React Native簡介

  • 分享至 

  • xImage
  •  

什麼是 React Native?

RN是由Meta推出的一個開源框架,讓開發者可以透過React來構建跨平台的移動應用程式。來達到一次編寫,處處運行的需求。利用 React Native,開發者可以同時為 iOS 和 Android 開發應用,而無需針對每個平台進行分開的原生開發。

選擇React Native的好處有什麼?

  • 跨平台開發:使用同一套程式碼同時構建 iOS 和 Android 應用,節省開發和維護成本。
  • 豐富的第三方套件:React Native 擁有龐大的開發者社群,提供豐富的第三方工具和套件,加快開發速度。
  • 熱重載(Hot Reloading):即時查看代碼變更效果,提升開發效率。

React Native的核心組件

主要常用的組件有如下:

React Native UI Android原生View iOS原生View
<View> <ViewGroup> <UIView> 使用flex布局的一種容器
<Text> <TextView> <UITextView> 顯示文字
<Image> <ImageView> <UIImageView> 顯示圖片
<ScrollView> <ScrollView> <UIScrollView> 能捲動的容器,能包含其他組件和View
<TextInput> <EditText> <UITextField> 用戶輸入text的部分

其他更多的元件可以參考該連結:React Native components-and-apis

開發方式:Expo 還是 React Native CLI?

在開發 React Native 應用程式時,目前主要有兩種選擇:ExpoReact Native CLI。目前看到大部分都是使用Expo進行開發,下面簡易說明一下兩者。

Expo

Expo 提供了預配置的工具和服務,適合剛入門的開發者

優點

  • 快速啟動:入門簡單,只需要簡易配置即可啟動應用
  • 豐富的內建 API:提供相機、GPS 等多種功能,無需寫原生代碼
    缺點
  • 限制較多:無法使用某些自定義原生代碼或第三方原生模組
  • App 體積較大:因包含許多內建 API,應用大小相對較大

React Native CLI

React Native CLI 是官方提供的命令行工具,讓我們能直接訪問核心功能並控制原生代碼

優點

  • 完全自訂:能操控原生代碼,適合需要自定義功能的應用
  • 更靈活:能較簡易整合第三方原生套件。
    缺點
  • 配置複雜:需要進行更多環境配置,可能會涉及到原生設備相關的代碼
  • 缺少內建API:Expo有內建的API能快速讓我們調用,使用cli的話就無法直接使用,需要自行實現或找其他第三方套件

我們這次系列文,主要會著重在使用Expo,並且如果有多餘時間的話,會額外嘗試cli並做紀錄。


上一篇
【從零開始學React Native】0.前言
下一篇
【從零開始學React Native】2.React Native的運作與架構
系列文
從零開始學React Native20
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言